<template>
	<view class="commission_style">
		<template v-if="promotionList.length>0">
			<view class="mx_info" v-for="(item,index) in promotionList" :key="item.id">
				<view class="info_item1">
					<text class="font_style1">直推业绩奖励</text>
					<text class="font_style2">{{item.createTime}}</text>
				</view>
				<view class="info_item2 font_style1">
					<text class="f_green">{{item.bonus}}</text>
					<text class="font_style2">余额：{{item.accumulateBonus}}</text>
				</view>
			</view>
		</template>
		<Nodata v-else />
	</view>
</template>

<script>
	import {
		getPromotionList
	} from '@/request/api/commission.js'
	import Nodata from '@/components/Nodata.vue'
	export default {
		name: 'commission',
		components: {
			Nodata
		},
		mounted() {
			this.getPromotion()
		},
		data() {
			return {
				promotionList: [{
					id: '', //主键自增id
					buyUserId: '', //买家id
					price: '', //订单金额,
					createTime: '', //创建时间
					bonus: '', //推广奖励
					accumulateBonus: '', //累计直推奖励
					sellUserId: '', //卖家id
					orderId: '', //订单id
					redWoodId: '', //红木id
				}]
			}
		},
		methods: {
			async getPromotion() {
				const res = await getPromotionList()
				if (res.data) {
					this.promotionList = res.data
				}
			}
		},
		onLoad() {
			this.promotionList = []
		}
	}
</script>

<style>
	.commission_style {
		background: white;
		height: 100%;
	}

	.f_green {
		color: #288F1A;
	}

	.mx_info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 30px;
		border-bottom: .5px solid #eee;
	}

	.mx_info .info_item1,
	.mx_info .info_item2 {
		display: flex;
		flex-direction: column;
	}

	.font_style1 {
		font-size: 16px;
	}

	.font_style2 {
		font-size: 12px;
		color: #999;
	}
</style>